<template>
    <div>
        <router-link tag="div" to="/" class="header-back" v-show="isShow">
            <div>
                <span class="iconfont icon-back">&#xe624;</span>
            </div>
        </router-link>
        <router-link to="/" class="header-title" tag="div" v-show="!isShow" :style="opacityStyle">
            <span class="iconfont icon-back title">&#xe624;</span>
            <span >{{ sightName }}</span>
        </router-link>
    </div>

</template>

<script>
export default {
    name: 'Header',
    props: {
        sightName: String
    },
    data(){
        return{
            isShow: true,
            opacityStyle: {
                opacity: 0
            }
        }
    },
    methods: {
        handleScroll(){
            let top = document.documentElement.scrollTop;
            if(top > 50){
                var opacity = top / 100 - 0.5;
                opacity = opacity > 1 ? 1 : opacity;
                this.opacityStyle = {
                    opacity: opacity  
                }
                this.isShow = false;
            }else{
                this.isShow = true;
            }
        }
    },
    mounted(){
        window.addEventListener('scroll',this.handleScroll,false)
    }
}
</script>

<style>
    .header-back{
        position: absolute;
        top: .2rem;
        left: .2rem;
        width: .8rem;
        height: .8rem;
        line-height: .8rem;
        text-align: center;
        border-radius: .4rem;
        background-color: rgba(0, 0, 0, .8);
    }

    .header-back .icon-back{
        color: #fff;
    }

    .header-title{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: .88rem;
        line-height: .88rem;
        background-color: #00bcd4;
        display: flex;
        justify-content: center;
		align-items: center;
        color: #fff;
        z-index: 4;
    }

    .header-title .title{
        position: absolute;
        top: 0;
        left: 0;
        width: .88rem;
        height: .88rem;
        display: flex;
        justify-content: center;
		align-items: center;

    }

</style>